<template>
  <div class="zlcj-content">
    <!-- <div class="panel-btn" :class="{ hiddlepanel: !hiddlepanel }">
      <div class="btn-center" v-if="hiddlepanel" @click="allScreen">全屏</div>
      <div class="btn-center" v-else @click="allScreen">退出全屏</div>
      <div class="tab-select-new">
        <span
          class="btn nolradius"
          style="width: 70px"
          :class="{ active: currentTime == 1 }"
          @click="selectTime(1)"
          >近24小时</span
        >
        <span
          class="btn noradius"
          style="width: 70px"
          :class="{ active: currentTime == 7 }"
          @click="selectTime(7)"
          >近7天</span
        >
        <span
          class="btn noradiusall"
          style="width: 70px"
          :class="{ active: currentTime == 30 }"
          @click="selectTime(30)"
          >近30天</span
        >
      </div>
    </div> -->
    <!-- 地图 -->
    <mapCom></mapCom>
    <!-- 左侧设备列表 -->
    <deviceCom v-if="hiddlepanel"></deviceCom>
    <!-- 右侧 -->
    <div class="right-panel" v-if="hiddlepanel">
      <!-- 天气 -->
      <tqybCom></tqybCom>
      <!-- 事件列表 -->
      <zxsjCom></zxsjCom>
      <!-- 事件趋势图 -->
      <sjqstCom></sjqstCom>
      <!-- 算法 -->
      <!-- <sfCom></sfCom> -->
    </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
import mapCom from './component/map.vue';
import deviceCom from './component/device.vue';
import tqybCom from './component/tqyb.vue';
import zxsjCom from './component/zxsj.vue';
import sjqstCom from './component/sjqst.vue';
import sfCom from './component/sf.vue';
const route = useRoute(); // 获取当前路由信息

// let currentTime = ref(7);
// const selectTime = (time) => {
//   currentTime.value = time;
// };

// 全屏
let hiddlepanel = ref(true);
const allScreen = () => {
  hiddlepanel.value = !hiddlepanel.value;
};

onMounted(() => {
  console.log(route.params.id);
});
</script>

<style lang="scss" scoped>
.zlcj-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .panel-btn {
    position: absolute;
    left: 500px;
    top: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 999;
    &.hiddlepanel {
      left: 30px;
    }
    .btn-center {
      width: 120px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #2263bf;
      font-family: YouSheBiaoTiHei;
      font-size: 14px;
      color: #ffffff;
      margin-right: 18px;
      border-radius: 6px;
    }
  }
  .right-panel {
    height: 100%;
    position: absolute;
    right: 20px;
    top: 40px;
  }
}
</style>
